import { useState } from 'react'
import { RouteConfig } from '../routes'

interface SidebarProps {
  hooks: RouteConfig[]
  interviews: RouteConfig[]
  selectedHook: any
  onSelectHook: (routeId: string) => void
  onSelectInterview: (routeId: string) => void
  isOpen: boolean
  onToggle: () => void
}

export default function Sidebar({
  hooks,
  interviews,
  selectedHook,
  onSelectHook,
  onSelectInterview,
  isOpen,
  onToggle
}: SidebarProps) {
  const hookCategories = Array.from(new Set(hooks.map(hook => hook.category)))
  const interviewCategories = Array.from(new Set(interviews.map(interview => interview.category)))

  // 折叠状态管理
  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(new Set())

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case 'easy': return 'bg-green-100 text-green-700'
      case 'medium': return 'bg-yellow-100 text-yellow-700'
      case 'hard': return 'bg-red-100 text-red-700'
      default: return 'bg-gray-100 text-gray-700'
    }
  }

  const getDifficultyText = (difficulty: string) => {
    switch (difficulty) {
      case 'easy': return '简单'
      case 'medium': return '中等'
      case 'hard': return '困难'
      default: return '未知'
    }
  }

  const toggleCategory = (category: string) => {
    const newCollapsed = new Set(collapsedCategories)
    if (newCollapsed.has(category)) {
      newCollapsed.delete(category)
    } else {
      newCollapsed.add(category)
    }
    setCollapsedCategories(newCollapsed)
  }

  const isCategoryCollapsed = (category: string) => collapsedCategories.has(category)

  return (
    <aside className={`h-full w-64 bg-white border-r border-gray-200 transition-all duration-300 overflow-y-auto ${isOpen ? 'w-64' : 'w-16'
      }`}>
      {/* 折叠/展开按钮 */}
      <div className="p-4 border-b border-gray-200 bg-gray-50">
        <button
          onClick={onToggle}
          className={`w-full p-3 rounded-lg hover:bg-white hover:shadow-sm transition-all duration-200 flex items-center ${isOpen ? 'justify-between' : 'justify-center'
            } group`}
        >
          <div className={`flex items-center space-x-3 transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0'}`}>
            <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <span className="text-sm font-medium text-gray-700">菜单</span>
          </div>

          {/* 展开状态下的箭头 */}
          {isOpen ? (
            <svg
              className="w-4 h-4 text-gray-500 transition-transform duration-200 group-hover:text-gray-700"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          ) : (
            <svg
              className="w-4 h-4 text-gray-500 transition-transform duration-200 group-hover:text-gray-700"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          )}
        </button>
      </div>

      <div className="p-6 pt-4">
        {/* Hook 分组 */}
        <div className="mb-8">
          <h2 className={`text-lg font-semibold text-gray-900 mb-6 transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0'}`}>
            Hook 列表
          </h2>

          <div className="space-y-4">
            {hookCategories.map(category => {
              const categoryHooks = hooks.filter(hook => hook.category === category)
              const isCollapsed = isCategoryCollapsed(`hook-${category}`)

              return (
                <div key={`hook-${category}`}>
                  <button
                    onClick={() => toggleCategory(`hook-${category}`)}
                    className={`w-full flex items-center justify-between p-3 rounded-lg hover:bg-gray-100 transition-colors text-left ${!isOpen ? 'justify-center' : ''
                      }`}
                  >
                    <h3 className={`text-sm font-medium text-gray-500 uppercase tracking-wide transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0'
                      }`}>
                      {category === 'storage' ? '存储' :
                        category === 'performance' ? '性能优化' :
                          category === 'ui' ? 'UI交互' :
                            category === 'network' ? '网络请求' : category}
                    </h3>
                    {isOpen && (
                      <svg
                        className={`w-4 h-4 text-gray-400 transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    )}
                  </button>

                  {!isCollapsed && isOpen && (
                    <div className="space-y-2 mt-2">
                      {categoryHooks.map(hook => (
                        <button
                          key={hook.id}
                          onClick={() => onSelectHook(hook.id)}
                          className={`w-full text-left p-4 rounded-lg transition-colors ${selectedHook?.id === hook.id
                            ? 'bg-primary-100 text-primary-700 border border-primary-200'
                            : 'hover:bg-gray-100 text-gray-700'
                            }`}
                        >
                          <div className="font-medium">{hook.title}</div>
                          <div className="text-sm text-gray-500 mt-1">
                            {hook.description}
                          </div>
                          <div className="flex flex-wrap gap-1 mt-2">
                            {hook.tags.map(tag => (
                              <span
                                key={tag}
                                className="px-2 py-1 text-xs bg-gray-200 text-gray-600 rounded"
                              >
                                {tag}
                              </span>
                            ))}
                          </div>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </div>

        {/* 面试题分组 */}
        <div>
          <h2 className={`text-lg font-semibold text-gray-900 mb-6 transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0'}`}>
            面试手撕题
          </h2>

          <div className="space-y-4">
            {interviewCategories.map(category => {
              const categoryInterviews = interviews.filter(interview => interview.category === category)
              const isCollapsed = isCategoryCollapsed(`interview-${category}`)

              return (
                <div key={`interview-${category}`}>
                  <button
                    onClick={() => toggleCategory(`interview-${category}`)}
                    className={`w-full flex items-center justify-between p-3 rounded-lg hover:bg-gray-100 transition-colors text-left ${!isOpen ? 'justify-center' : ''
                      }`}
                  >
                    <h3 className={`text-sm font-medium text-gray-500 uppercase tracking-wide transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0'
                      }`}>
                      {category === 'algorithm' ? '算法' :
                        category === 'javascript' ? 'JavaScript' :
                          category === 'react' ? 'React' :
                            category === 'css' ? 'CSS' : category}
                    </h3>
                    {isOpen && (
                      <svg
                        className={`w-4 h-4 text-gray-400 transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    )}
                  </button>

                  {!isCollapsed && isOpen && (
                    <div className="space-y-2 mt-2">
                      {categoryInterviews.map(interview => (
                        <button
                          key={interview.id}
                          onClick={() => onSelectInterview(interview.id)}
                          className={`w-full text-left p-4 rounded-lg transition-colors ${selectedHook?.id === interview.id
                            ? 'bg-primary-100 text-primary-700 border border-primary-200'
                            : 'hover:bg-gray-100 text-gray-700'
                            }`}
                        >
                          <div className="flex items-center justify-between">
                            <div className="font-medium">{interview.title}</div>
                            <span className={`px-2 py-1 text-xs rounded ${getDifficultyColor(interview.difficulty || 'medium')}`}>
                              {getDifficultyText(interview.difficulty || 'medium')}
                            </span>
                          </div>
                          <div className="text-sm text-gray-500 mt-1">
                            {interview.description}
                          </div>
                          <div className="flex flex-wrap gap-1 mt-2">
                            {interview.tags.map(tag => (
                              <span
                                key={tag}
                                className="px-2 py-1 text-xs bg-gray-200 text-gray-600 rounded"
                              >
                                {tag}
                              </span>
                            ))}
                          </div>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </aside>
  )
} 